<template>
  <div>
    <movie-hot-2 :hotlist2="hotlist2"></movie-hot-2>
    <div class="line"></div>
    <ul>
      <li class="con" v-for="(item, index) in daiyinglist" :key="index">
        <div class="day">{{ index }}</div>
        <div class="daiying" v-for="i in item" :key="i.id">
          <div class="item-img">
            <img :src="i.img" />
          </div>
          <div class="item-text">
            <div class="item-l">
              <div class="item-name">
                <span> {{ i.nm }}</span>
              </div>
              <div>
                <span class="people" v-if="i.sc == 0"
                  >{{ i.wish }}<span class="p2">人想看</span></span
                ><span v-else
                  >观众评 <span class="score">{{ i.sc }}</span></span
                >
              </div>
              <div>{{ i.star }}</div>
              <div>{{ i.rt }}</div>
            </div>
            <div class="item-r">
              <div
                class="btn"
                :style="
                  i.preShow ? { background: '#3C9FE6' } : { background: '#f90' }
                "
              >
                {{ i.preShow ? "预售" : "想看" }}
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import MovieHot2 from "./components/MovieHot2.vue";
import axios from "axios";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Daiying",
  components: {
    MovieHot2,
  },
  data() {
    return {
      hotlist2: [],
      daiyinglist: [],
    };
  },
  mounted() {
    axios.get("./json/daiying.json").then((res) => {
      console.log(res);
      this.hotlist2 = res.data.coming;
      let daiyinglist = res.data.coming;
      let daiying = {}; //放重组后的数据
      //重组数据将 一维数组转为二维数组
      daiyinglist.forEach((item) => {
        if (daiying[item.comingTitle]) {
          //有的话，数组中有该条记录
          daiying[item.comingTitle].push(item);
        } else {
          //没有该条记录,创建新数组
          daiying[item.comingTitle] = [];
          daiying[item.comingTitle].push(item);
        }
      });
      console.log(daiying);
      this.daiyinglist = daiying;
    });
  },
};
</script>

<style lang="less" scoped>
.day {
  font-size: 14px;
  color: #333;
  padding-top: 0.2667rem;
  padding-bottom: 0.2667rem;
  padding-left: 0.2667rem;
}
.line {
  width: 100%;
  height: 10px;
  background: #eee;
  margin-bottom: 10px;
}
.con {
  width: 100%;
  background: #fff;
}
.daiying {
  display: flex;
  justify-content: space-around;
  .item-img {
    width: 20%;

    img {
      width: 1.7067rem;
      height: 2.4rem;
      display: inline-block;
      // padding-left: 0.2667rem;
    }
  }
  .item-text {
    width: 75%;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    .item-l {
      font-size: 13px;
      color: #666;
      margin-bottom: 14px;
      width: 75%;
      div {
        margin-bottom: 5px;
        margin-top: 5px;
      }
      div:nth-child(1) {
        font-size: 17px;
        font-weight: bold;
        color: #333;
        display: flex;
        align-items: center;

        span {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        img {
          width: 1.1467rem;
          height: 0.3733rem;
          margin-left: 5px;
        }
      }
      div:nth-of-type(3) {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .people {
        color: #faaf00;
        font-size: 15px;
        font-weight: bold;
      }
      .p2 {
        font-size: 12px;
        color: #666;
        font-weight: normal;
      }
      .score {
        color: #faaf00;
        font-size: 15px;
        font-weight: bold;
      }
    }
    .item-r {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 20%;
      .btn {
        width: 1.44rem;
        height: 0.7467rem;
        border-radius: 1.0667rem;
        background-color: #f90;
        box-shadow: 0 0.04rem 0.04rem 0 rgb(240 61 55 / 15%);
        color: #fff;
        font-size: 13px;
        text-align: center;
        line-height: 0.7467rem;
      }
    }
  }
}
</style>